<template>
    <div class="picker">
        <!-- 当前外露文本 -->
        <div class="value">{{ text }}</div>

        <div class="wraper" @click.stop>
            <van-popup v-model="show" position="bottom">
                <div class="body">
                    <div class="header">
                        <div class="btn-cancel" @click="onCancel">取消</div>
                        <div class="title">{{ title }}</div>
                    </div>
                    <div class="list column">
                        <div
                            class="item"
                            :class="{ 'item-active': item.value === value }"
                            v-for="(item, index) in range"
                            :key="index"
                            @click="onConfirm(item)"
                        >
                            {{ item.text }}
                        </div>
                    </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: ""
        },
        range: {
            type: Array,
            default() {
                return [{ text: "", value: "" }];
            }
        },
        title: {
            type: String,
            default: "标题"
        }
    },
    data() {
        return {
            show: false
        };
    },

    computed: {
        text() {
            let text = "";
            this.range.forEach(i => {
                if (i.value === this.value) {
                    text = i.text;
                }
            });
            return text;
        }
    },

    methods: {
        showPicker() {
            this.show = true;
        },

        onConfirm(item) {
            this.show = false;
            if (item.value === this.value) {
                return;
            }
            this.$emit("input", item.value);
            this.$emit("change", item);
        },

        onCancel() {
            this.show = false;
        }
    }
};
</script>


<style lang="less" scoped>
.picker {
    display: inline-block;
    .wraper {
        width: 100%;

        .body {
            padding: 30px 30px 0 30px;
        }

        .header {
            position: relative;
            padding-bottom: 50px;
            display: flex;
            align-items: center;
            .title {
                width: 100%;
                text-align: center;
                position: absolute;
                top: 0;
            }
            .btn-cancel {
                color: #888;
            }
        }

        .list {
            .item {
                padding: 30px 0;
                font-size: 32px;
                text-align: center;
                border-top: 1px solid #f5f5f5;
            }
        }
    }
}
</style>